<template>
  <div class="subjectVideo">
    <!-- 默认样式 -->
    <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
      <div v-for="index in 1" :key="index" class="defaultcommodityList0" v-show="datas.commodityType === 0">
        <div class="videolist" style=" background: linear-gradient(180deg, #3f5cd5 0%, rgba(29, 55, 165, 0.31) 100%);">
          <video width="330" height="175" src="" poster="../../../../assets//images/suolvtu.png" controls></video>
        </div>
      </div>
      <div v-for="index in 2" :key="index + 1" class="defaultcommodityList1" v-show="datas.commodityType === 1">
        <div class="videolist" style="background: linear-gradient(180deg, #3f5cd5 0%, rgba(29, 55, 165, 0.31) 100%);">
          <video width="231" height="130" src="" poster="../../../../assets//images/suolvtu.png" controls></video>
        </div>
      </div>
    </section>
    <!-- 图文样式 -->
    <section v-show="datas.imageList && datas.imageList[0]" class="defaultcommodity">
      <div v-for="(item, index) in datas.imageList" :key="index" class="defaultcommodityList0" v-show="datas.commodityType === 0">
        <div class="videolist" :style="{ backgroundImage: 'url(' + item.bgUrl + ')' }">
          <video width="330" height="175" :src="item.videoUrl" :poster="item.vimgUrl" controls></video>
        </div>
      </div>
      <div v-for="(item, index) in datas.imageList" :key="index + '1'" class="defaultcommodityList1" v-show="datas.commodityType === 1">
        <div class="videolist" :style="{ backgroundImage: 'url(' + item.bgUrl + ')' }">
          <video width="231" height="130" :src="item.videoUrl" :poster="item.vimgUrl" controls></video>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: "SubjectVideo",
  props: {
    datas: Object,
  },
};
</script>
<style lang="scss" scoped>
.subjectVideo {
  position: relative;
  .defaultcommodity {
    .defaultcommodityList0 {
      width: 100%;
      height: 331px;
      .videolist {
        height: 331px;
        video {
          margin-top: 60px;
          background-size: 100% 100%;
        }
      }
    }
    .defaultcommodityList1 {
      width: 100%;
      height: 143px;
      margin-bottom: 20px;
      .videolist {
        padding: 10px 0;
        background-size: 100% 100%;
      }
    }
  }
}
</style>